<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      style="z-index: 1;position: absolute"
  >
<!--折叠条-->
    <div @click="isCollapsed"
         @mousemove="mouseOver"
         @mouseleave="mouseLeave"
         :style="colorChange">III</div>
    <!--地图底图-->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><View /></el-icon>
        <span>系统底图</span>
      </template>
        <el-checkbox-group v-model="checkMapList" @change="changeMapShow" >
          <el-col :span="1" style="padding-left: 45px">
            <el-checkbox label="天地图" />
            <el-checkbox label="天地图标注" />
            <el-checkbox label="高德卫星图" />
            <el-checkbox label="高德地图" />
          </el-col>
        </el-checkbox-group>
    </el-sub-menu>

      <!--可视化图层-->
    <el-sub-menu index="2">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>可视化模块图层</span>
        </template>
        <el-menu-item-group>
            <el-col :span="1" style="padding-left: 45px">
                <el-checkbox v-for="layer in checkDiyLayerList"
                             :label="layer"
                             :key="layer"
                             :checked="true"
                             @change="selectDispatchMap(layer)"
                             >{{layer}}</el-checkbox>
            </el-col>
        </el-menu-item-group>
      </el-sub-menu>

    <!-- 骑行绿道提取 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><CopyDocument /></el-icon>
        <span>高流量道路图层</span>
      </template>
      <el-menu-item-group>
        <el-col :span="1" style="padding-left: 45px">
          <el-checkbox v-for="layer in checkHighLayerList"
                       :label="layer"
                       :key="layer"
                       :checked="true"
                       @change="selectHighMap(layer)"
          >{{layer}}</el-checkbox>
        </el-col>
      </el-menu-item-group>
    </el-sub-menu>

    <!--单车调度-->
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>单车调度图层</span>
      </template>
      <el-menu-item-group>
        <el-col :span="1" style="padding-left: 45px">
          <el-checkbox v-for="layer in checkDispatchLayerList"
                       :label="layer"
                       :key="layer"
                       :checked="true"
                       @change="selectHighMap(layer)"
          >{{layer}}</el-checkbox>
        </el-col>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  View,
  Menu as IconMenu,
  CopyDocument,
  Setting,
} from '@element-plus/icons-vue'
import "../pages/Map.vue";
import store from "../store/index.js";

const isCollapse = ref(true)
//菜单折叠条 ref变量赋值要使用ref.value
const isCollapsed=()=>{
  isCollapse.value=!isCollapse.value
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//折叠悬浮事件
const colorChange=ref('');
function mouseOver(){
  colorChange.value='background-color: #c6e2ff';
}
function mouseLeave(){
  colorChange.value='';
}
//地图管理图层
const checkMapList = ref(['天地图'])
const changeMapShow=()=>{
  //天地图
  if(checkMapList.value.indexOf('天地图')!=-1)
  {
    let mapType=checkMapList.value.indexOf('天地图')
    selectMap(mapType,'天地图')
  }else{
    let mapType=checkMapList.value.indexOf('天地图')
    selectMap(mapType,'天地图')
  }
  //天地图注记
  if(checkMapList.value.indexOf('天地图标注')!=-1)
  {
    let mapType=checkMapList.value.indexOf('天地图标注')
    selectMap(mapType,'天地图标注')
  }else {
    let mapType=checkMapList.value.indexOf('天地图标注')
    selectMap(mapType,'天地图标注')
  }
  //高德卫星地图
  if(checkMapList.value.indexOf('高德卫星图')!=-1)
  {
    let mapType=checkMapList.value.indexOf('高德卫星图')
    selectMap(mapType,'高德卫星图')
  }else{
    let mapType=checkMapList.value.indexOf('高德卫星图')
    selectMap(mapType,'高德卫星图')
  }
  //高德地图
  if(checkMapList.value.indexOf('高德地图')!=-1)
  {
    let mapType=checkMapList.value.indexOf('高德地图')
    selectMap(mapType,'高德地图')
  }else{
    let mapType=checkMapList.value.indexOf('高德地图')
    selectMap(mapType,'高德地图')
  }
}
//选择系统底图显示与隐藏
const selectMap=(key,layerTitle)=>{
  let layer=[];
  let layerName=[];
  let layerVisibility=[];
  let map=store.state.map
  let layers=map.getLayers();
  console.log(layers.getLength())
  for(let i=0;i<layers.getLength();i++) {
    layer[i] = layers.item(i);
    layerName[i] = layer[i].get('title');
    layerVisibility[i] = layer[i].getVisible();
    console.log(layerName[i])
    if(key!=-1&&layerName[i]==layerTitle){
      layer[i].setVisible(true)
    }else if(key==-1&&layerName[i]==layerTitle){
      layer[i].setVisible(false)
    }
  }
  store.commit('changeMap',map)
}

//地图管理图层
const checkDiyLayerList=store.state.checkDiyLayerList
const selectDiyMap=(layerTitle)=>{
  let layer=[];
  let layerName=[];
  let layerVisibility=[];
  let map=store.state.map
  let layers=map.getLayers();
  console.log(layers.getLength())
  for(let i=0;i<layers.getLength();i++) {
    layer[i] = layers.item(i);
    layerName[i] = layer[i].get('name');
    layerVisibility[i] = layer[i].getVisible();
    console.log(layerName[i])
    //判断对应图层是否可见，
    if(layerName[i]==layerTitle){
      console.log(layer[i].getVisible())
      if(layer[i].getVisible())
      {
        //隐藏
        layer[i].setVisible(false)
      }else {
        //显示
        layer[i].setVisible(true)
      }

    }
  }
  store.commit('changeMap',map)
}

/**高流量路段图层*/
const checkHighLayerList=store.state.checkHighLayerList
const selectHighMap=(layerTitle)=>{
  let layer=[];
  let layerName=[];
  let layerVisibility=[];
  let map=store.state.map
  let layers=map.getLayers();
  console.log(layers.getLength())
  for(let i=0;i<layers.getLength();i++) {
    layer[i] = layers.item(i);
    layerName[i] = layer[i].get('name1');
    layerVisibility[i] = layer[i].getVisible();
    console.log(layerName[i])
    //判断对应图层是否可见，
    if(layerName[i]==layerTitle){
      console.log(layer[i].getVisible())
      if(layer[i].getVisible())
      {
        //隐藏
        layer[i].setVisible(false)
      }else {
        //显示
        layer[i].setVisible(true)
      }

    }
  }
  store.commit('changeMap',map)
}

/**单车调度图层*/
const checkDispatchLayerList=store.state.checkDispatchLayerList
const selectDispatchMap=(layerTitle)=>{
  let layer=[];
  let layerName=[];
  let layerVisibility=[];
  let map=store.state.map
  let layers=map.getLayers();
  console.log(layers.getLength())
  for(let i=0;i<layers.getLength();i++) {
    layer[i] = layers.item(i);
    layerName[i] = layer[i].get('name2');
    layerVisibility[i] = layer[i].getVisible();
    console.log(layerName[i])
    //判断对应图层是否可见，
    if(layerName[i]==layerTitle){
      console.log(layer[i].getVisible())
      if(layer[i].getVisible())
      {
        //隐藏
        layer[i].setVisible(false)
      }else {
        //显示
        layer[i].setVisible(true)
      }

    }
  }
  store.commit('changeMap',map)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>